<template>
  <div v-if="cinemaNowList.length != 0" style="height: 100%; width: 100%">
    <!-- 标题栏 -->
    <!-- 吸顶完成 -->
    <van-sticky>
      <van-nav-bar :title="film.name" left-arrow>
        <template #right>
          <van-icon name="search" size="18" @click="pushRouterSearch" />
        </template>

        <template #left>
          <van-icon name="arrow-left" @click="$router.go(-1)" />
        </template>
      </van-nav-bar>
    </van-sticky>

    <van-tabs v-model="active" @click="add">
      <van-tab
        v-for="item in showCinemas"
        :title="timeClear(item.showDate)"
        :key="item.showDate + 'a'"
      ></van-tab>
    </van-tabs>
    <!-- 点击下拉框 -->
    <!-- 修改 -->
    <van-dropdown-menu>
      <van-dropdown-item :title="value1" ref="itemMenus">
        <div class="ul-class-menus">
          <p class="p-class-menus" @click="searchMenuAll">全城</p>
          <p
            @click="searchMenuOne(item)"
            v-for="(item, index) in blockList"
            :key="index + '1'"
            class="p-class-menus"
          >
            {{ item }}
          </p>
        </div>
      </van-dropdown-item>
      <van-dropdown-item
        v-model="value2"
        :options="option2"
        @change="changeOption2"
      />
    </van-dropdown-menu>

    <!-- 列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      style="height: 100%; width: 100%"
    >
      <van-cell
        v-for="(item, index) in list"
        :key="item + index"
        @click="pushRouter(item.cinemaId)"
      >
        <template #title>
          <span class="custom-title">{{ item.name }}</span>
        </template>
        <template #label>
          <span class="custom-title">{{ item.address }}</span>
        </template>
        <template #default>
          <div class="custom-title">&yen;{{ item.lowPrice / 100 }}起</div>
          <div class="custom-title">距离未知</div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>



<script>
import {
  axiosAll,
  cinemaNowShow,
} from "../../request-get/cinema-details-post.js";
export default {
  name: "CinemaDetails",
  data() {
    return {
      // 当前进入这个页面得电影信息
      film: "",
      showList: "",
      // 正在热映中的电影院
      showCinemas: [],
      // 低价的电影啥啥啥的
      cinemaExtendList: [],
      // 每一天的list 上线信息（里面是14个对象 对象里有数组）
      cinemaNowList: [],
      // 区块数组
      blockList: [],
      // 下拉框的设置
      value1: "全城",
      value2: "a",
      option2: [
        { text: "最近去过", value: "a" },
        { text: "离我最近", value: "b" },
      ],

      list: [],
      loading: false,
      finished: false,
      flag: 0,
      // 每日选项
      active: 0,
      // 计时器
      setTime:0
    };
  },
  mounted() {
    // 发送 GET 请求
    axiosAll(this.$route.query.filmId, this.$route.query.cityId).then((res) => {
      this.film = JSON.parse(JSON.stringify(res[0].data.data.film));
      this.showList = JSON.parse(JSON.stringify(res[1].data.data));
      // 信息
      this.showCinemas = JSON.parse(
        JSON.stringify(res[1].data.data.showCinemas)
      );
      // 数据重新排序(接口数据)
      this.showCinemas.sort((a, b) => {
        return a.showDate - b.showDate;
      });
      this.cinemaExtendList = JSON.parse(
        JSON.stringify(res[1].data.data.cinemaExtendList)
      );
      // 发送 POST 请求
      cinemaNowShow(
        this.showCinemas[this.active].cinemaList,
        this.$route.query.cityId
      ).then((res) => {
        this.cinemaNowList.push(
          JSON.parse(JSON.stringify(res.data.data.cinemas))
        );
        // console.log(this.cinemaNowList[0]);
        // set设置
        let set01 = new Set([]);
        for (let item of this.cinemaNowList[0]) {
          set01.add(item.districtName);
        }
        this.blockList = Array.from(set01);
        // console.log(this.blockList);
      });
    });
  },
 beforeDestroy(){
  //  清除计时器
   clearTimeout(this.setTime)
 },
  methods: {
    changeOption2() {
      this.list.splice(0, this.list.length);
      if (this.value2 == "b") {
        for (let i = 0; i < this.cinemaNowList[0].length; i++) {
          if (this.cinemaNowList[0][i].name.length < 6) {
            this.list.push(this.cinemaNowList[0][i]);
          }
        }
      } else if (this.value2 == "a") {
        for (let i = 0; i < this.cinemaNowList[0].length; i++) {
          this.list.push(this.cinemaNowList[0][i]);
        }
      }
    },
    // 寻找cinema
    pushRouterSearch() {
      this.$router.push({
        path: "searchCinemas",
        query: {
          cityId: this.$route.query.cityId,
          filmId: this.$route.query.filmId,
          k: Math.random() * 4561230 + 5,
        },
      });
    },
    // 跳转到对应的cinema
    pushRouter(cinemaId) {
      // console.log(this.$store.state.cityId);
      // console.log(this.$store.state.filmId);
      this.$store.commit("setfilmId", this.$route.query.filmId);
      this.$store.commit("setCityId", this.$route.query.cityId);
      this.$store.commit("setCinemaId", cinemaId);
      this.$router.push({
        path: "CinemaList",
        query: {
          k: Math.random() * 6678 + 1,
        },
      });
    },
    /*切换时间*/
    add() {
      // console.log(this.showCinemas);
      cinemaNowShow(
        this.showCinemas[this.active].cinemaList,
        this.$route.query.cityId
      ).then((res) => {
        this.cinemaNowList.splice(0, this.cinemaNowList.length);
        this.cinemaNowList.push(
          JSON.parse(JSON.stringify(res.data.data.cinemas))
        );
        // console.log(this.cinemaNowList);
        this.list.splice(0, this.list.length);
        this.onLoad();
      });
    },
    onLoad() {
    this.setTime=  setTimeout(() => {
        let core = this.list.length;
        // console.log(core);
        for (let i = 0; i < 6; i++) {
          if (core + i >= this.cinemaNowList[0].length) {
            // console.log(core+ i);
            this.finished = true;
            break;
          }
          this.list.push(this.cinemaNowList[0][core + i]);
        }

        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= this.cinemaNowList[0].length) {
          this.finished = true;
        }
      }, 500);
    },
    // 转化时间戳的函数
    timeClear(ns) {
      var date = new Date();
      var weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

      let x = new Date(parseInt(ns) * 1000);

      let month = x.getMonth()+1;
      let day = x.getDate();
      let dayNow = x.getDay();

      // if (day - date.getDate() < 1) {
      //   return "今天" + month + "月" + day + "日";
      // } else if (day - date.getDate() == 1) {
      //   return "明天" + month + "月" + day + "日";
      // } else if (day - date.getDate() == 2) {
      //   return "后天" + month + "月" + day + "日";
      // } else {
        return weeks[dayNow] + month + "月" + day + "日";
      // }
    },
    // 全城收索
    searchMenuAll() {
      this.list.splice(0, this.list.length);
      for (let i = 0; i < this.cinemaNowList[0].length; i++) {
        this.list.push(this.cinemaNowList[0][i]);
      }
      this.value1 = "全城";
      this.$refs.itemMenus.toggle();
    },
    // 部分收缩
    searchMenuOne(e) {
      this.list.splice(0, this.list.length);
      for (let i = 0; i < this.cinemaNowList[0].length; i++) {
        if (this.cinemaNowList[0][i].districtName == e) {
          this.list.push(this.cinemaNowList[0][i]);
        }
      }
      this.value1 = e;
      this.$refs.itemMenus.toggle();
    },
  },
};
</script>





<style scoped>
.ul-class-menus {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 10px;
}
.p-class-menus {
  width: 65px;
  border: 1px solid rgba(210, 214, 220, 0.5);
  margin-right: 5px;
  display: inline-block;
  border: 1px solid;
  /* color: #ff5f16; */
  border-radius: 3px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.p-class-menus:active {
  background-color: red;
}
</style>
